<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Clipping</title>
    <script src="../dist/quark-renderer.js"></script>
</head>
<body>
    <div id="main" style="width:1000px;height:600px;"></div>
    <script type="text/javascript">
        // 初始化qrenderer
        var qr = QuarkRenderer.init(document.getElementById('main'));

        var g1 = new QuarkRenderer.Group();
        var g2 = new QuarkRenderer.Group();
        g1.add(g2);
        qr.add(g1);

        var circle = new QuarkRenderer.Circle({
            shape: {
                r: 0,
                cx: 0,
                cy: 0
            },
            position: [200, 200]
        });

        g2.setClipPath(circle);

        var rect = new QuarkRenderer.Rect({
            shape: {
                width: 500,
                height: 300,
                x: -250,
                y: -20
            },
            position: [200, 150]
        });
        g1.setClipPath(rect);

        for (var i = 0; i < 50; i++) {
            for( var j = 0; j < 50; j++){
                var image = new QuarkRenderer.Image({
                    position: [i * 50, j * 50],
                    scale: [1, 1],
                    style: {
                        x: 0,
                        y: 0,
                        image: './data/test.png',
                        width: 50,
                        height: 50
                    },
                    draggable: true
                });
                g2.add(image);
            }
        }

        circle.animate()
            .when(0, {
                shape:{
                    r: 100
                }
            })    
            .when(1000, {
                shape:{
                    r: 300
                }
            })
            .start();
    </script>
</body>
</html>